<template>
	<view class="home_category">
		<navigator
		class="cate_item"
		v-for="item in category"
		:key="item.id"
		:url="`/pages/imgCategory/imgCategory?id=${item.id}`">
			<image mode="widthFix" :src="item.cover"></image>
			<view class="cate_name">{{item.name}}</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category: []
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "分类"
			})
			this.getData()
		},
		methods: {
			getData() {
				this.$request ({
					url: "http://157.122.54.189:9088/image/v1/vertical/category"
				}).then( res => {
					this.category = res.res.category
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
 .home_category {
	 display: flex;
	 flex-wrap: wrap;
	 .cate_item {
		width: 50%;
		border: 5rpx solid #fff;
		position: relative;
		image {
			height: 640rpx;
		}
		.cate_name {
			position: absolute;
			width: 100%;
			height: 50rpx;
			left: 0;
			bottom: 0;
			color: #fff;
			background-image: linear-gradient(to right top,rgba(0,0,0,.2),rgba(0,0,0,0));
			font-size: 40rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}
	 }
 }
</style>
